<script setup lang="ts">
import { defineProps, ref, watch } from "vue"
import { FormInst, NInputNumber, NModal, NForm, NFormItem, NInput, NSelect } from "naive-ui"

const props = defineProps<{
  showModal: boolean
  modalSubmit: (data: any) => void
  modalClose: () => void
  handleUpdateCate: (data: any) => void
  editConfig: any
  incomingPeople: any
}>()

const formRef = ref<FormInst | null>(null)
const formValue = ref({
  orderName: "",
  orderNum: 0,
  purchasePrice: 0,
  incomingPeople: null,
  commodityParametersone: "",
  commodityParameterstwo: "",
})
const rules = {
  orderName: {
    required: true,
    message: "请填写商品名字",
  },
  orderNum: {
    required: true,
    message: "请填写进货数量",
  },
  purchasePrice: {
    required: true,
    message: "请填写进货价",
  },
  incomingPeople: {
    required: true,
    message: "请填写进货人",
  },
  commodityParametersone: {
    required: true,
    message: "请填写商品参数1",
  },
}
//弹窗确认
const modalOnOk = () => {
  formRef.value?.validate(errors => {
    if (!errors) {
      if (props.editConfig.isEdit) {
        props.handleUpdateCate({ id: props.editConfig.echoData.id, ...formValue.value })
      } else {
        props.modalSubmit(formValue.value)
      }
    } else {
      console.log(errors)
    }
  })
}

const clearForm = () => {
  formValue.value = {
    orderName: "",
    orderNum: 0,
    purchasePrice: 0,
    incomingPeople: null,
    commodityParametersone: "",
    commodityParameterstwo: "",
  }
}

//弹窗关闭
const modalCancel = () => {
  props.modalClose()
  clearForm()
}

//编辑分类的监听回调
watch(
  () => props.editConfig,
  (newValue, oldValue) => {
    if (newValue.isEdit === true) {
      formValue.value = {
        orderName: newValue.echoData?.orderName,
        orderNum: newValue.echoData?.orderNum,
        purchasePrice: newValue.echoData?.purchasePrice,
        incomingPeople: newValue.echoData?.incomingPeople,
        commodityParametersone: newValue.echoData?.commodityParametersone,
        commodityParameterstwo: newValue.echoData?.commodityParameterstwo,
      }
    }
  },
  {
    deep: true,
  }
)
</script>

<template>
  <div class="modal">
    <n-modal :show="props.showModal" preset="dialog" :title="props.editConfig.isEdit ? '编辑进货' : '新增进货'" positive-text="确认"
      negative-text="取消" @positive-click="modalOnOk" @negative-click="modalCancel" :show-icon="false"
      :on-close="modalCancel" :on-mask-click="modalCancel">
      <n-form ref="formRef" label-placement="left" :model="formValue" :rules="rules">
        <n-form-item label="商品名字:" path="orderName">
          <n-input class="form_item" v-model:value="formValue.orderName" placeholder="请填写商品名字" />
        </n-form-item>
        <n-form-item label="进货数量:" path="orderNum">
          <n-input-number clearable min="0" class="form_item" v-model:value="formValue.orderNum" placeholder="请填写进货数量" />
        </n-form-item>
        <n-form-item label="进货价:" path="purchasePrice">
          <n-input-number clearable min="0" class="form_item" v-model:value="formValue.purchasePrice"
            placeholder="请填写进货价" />
        </n-form-item>
        <n-form-item label="进货人:" path="incomingPeople">
          <n-select class="form_item" v-model:value="formValue.incomingPeople" placeholder="请选择进货人"
            :options="props.incomingPeople" />
        </n-form-item>
        <n-form-item label="商品参数1:" path="commodityParametersone">
          <n-input class="form_item" v-model:value="formValue.commodityParametersone" placeholder="请填写商品参数1" />
        </n-form-item>
        <n-form-item label="商品参数2:" path="commodityParameterstwo">
          <n-input class="form_item" v-model:value="formValue.commodityParameterstwo" placeholder="请填写商品参数2" />
        </n-form-item>
      </n-form>
    </n-modal>
  </div>
</template>

<style lang="scss" scoped>
.form_item {
  width: 180px;
}
</style>
